<!--  -->
<template>
  <div>
    <van-nav-bar title="修改头像" right-text="保存" @click-right="onClickRight">
      <template #left>
        <i class="iconfont iconbtn_nav_back left" @click="toBack"></i>
      </template>
    </van-nav-bar>
    <!--头像区域  -->
    <div class="avatar">
      <van-uploader
        v-model="fileList"
        :after-read="afterRead"
        max-count="1"
        preview-size="200"
      />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [
        {
          url: 'https://img01.yzcdn.cn/vant/leaf.jpg',
          previewSize: 200
        }
      ]
    }
  },
  methods: {
    toBack () {
      this.$router.back()
    },

    // 图片上传
    afterRead (file) {
      console.log(file)
    },
    onClickRight () {}
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  .left {
    position: absolute;
    left: 0;
    padding-left: 0;
    font-size: 50px;
  }
}
::v-deep .van-nav-bar__text {
  color: #000000;
}
.avatar {
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  ::v-deep .van-uploader__upload {
    width: 200px;
    height: 200px;
  }
}
</style>
